import React, { useEffect, useState } from 'react';

const UseEffect = () => {
  const [count, setCount] = useState(0)
  const [age, setAge] = useState(11)
  useEffect(() => {
    console.log("count+age=:", count + age)
    let timer1 = setInterval(() => {
      // console.log("age", age) // 如果没有依赖age, 这里输出age一直是11， 获取到的是改state的初始片段的值
      setAge((prevState) => prevState + 1)
    }, 1000)
    // return 后面的函数，在每次执行effect（）之前和组件卸载之前都会执行一次。
    return () => {
      // console.log("打扫除")
      clearInterval(timer1)
    }
  }, [count, age])
  return (
    <div>
      <h1>count: {count}--------age: {age}</h1>
      <div><button type='button' onClick={() => setCount(count + 1)}>increment </button></div>
      <div><button type='button' onClick={() => setAge(age + 1)}>age increment </button></div>

    </div>
  );
}

export default UseEffect;
